<template>
  <view class="custom">
    <view class="custom__grid">
      <view
        class="custom__grid__item"
        :class="{ active: current === 0 }"
        @click="handleTabBar(0)"
      >
        <view class="custom__grid__item__font">
          <text class="iconfont icon-home-fill" v-if="current === 0"></text>
          <text class="iconfont icon-home" v-else></text>
        </view>
        <text class="custom__grid__item__text">首页</text>
      </view>
      <view
        class="custom__grid__item"
        :class="{ active: current === 1 }"
        @click="handleTabBar(1)"
      >
        <view class="custom__grid__item__font">
          <text class="iconfont icon-building-fill" v-if="current === 1"></text>
          <text class="iconfont icon-building" v-else></text>
        </view>
        <text class="custom__grid__item__text">房源</text>
      </view>
      <view
        class="custom__grid__item"
        :class="{ active: current === 2 }"
        @click="handleTabBar(2)"
      >
        <view class="custom__grid__plus">
          <view class="custom__grid__item__jia">
            <text class="iconfont icon-plus-fill"></text>
          </view>
        </view>
         <text class="custom__grid__plus__text">发布</text>
      </view>
      <view
        class="custom__grid__item"
        :class="{ active: current === 3 }"
        @click="handleTabBar(3)"
      >
        <view class="custom__grid__item__font">
          <text class="iconfont icon-message-fill" v-if="current === 3"></text>
          <text class="iconfont icon-message" v-else></text>
          <view
            class="custom__grid__item__font--dot"
            v-if="userInfoStore.hasMessage"
          ></view>
        </view>
        <text class="custom__grid__item__text">消息</text>
      </view>
      <view
        class="custom__grid__item"
        :class="{ active: current === 4 }"
        @click="handleTabBar(4)"
      >
        <view class="custom__grid__item__font">
          <text class="iconfont icon-my-fill" v-if="current === 4"></text>
          <text class="iconfont icon-my" v-else></text>
        </view>
        <text class="custom__grid__item__text">我的</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { defineProps, ref, computed, reactive } from "vue";
import { userStore } from "@/stores/user";
import { onShow } from "@dcloudio/uni-app";
import CacheUtils from "@/utils/CacheUtils";
import Toast from "@/utils/Toast";

const userInfoStore = userStore();

const props = defineProps({
  current: {
    type: Number,
    default: 0,
  },
});

/** 切换tabBar 事件*/
const handleTabBar = (index) => {
  console.log("tabBarIndex =====>", index);
  if (index === props.current) {
    return;
  }
  switch (index) {
    case 0:
      uni.reLaunch({
        url: "/pages/index/index",
      });
      break;
    case 1:
      uni.switchTab({
        url: "/pages/houseOrigin/houseOrigin",
      });
      break;
    case 2:
      if (userInfoStore.userInfo.newUser) {
        Toast.info("请先登录");
        return;
      }
      uni.navigateTo({
        url: "/pages/publish/publish",
      });
      break;
    case 3:
      uni.switchTab({
        url: "/pages/message/message",
      });
      break;
    case 4:
      uni.switchTab({
        url: "/pages/my/my",
      });
      break;
    default:
      console.log("error");
  }
};
</script>
<style scoped lang="scss">
.custom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 0 16rpx 0 rgba(31, 171, 98, 0.1);
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;
  padding-top: 20rpx;

  &__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20rpx;

    &__item {
      display: flex;
      flex-direction: column;
      align-items: center;

      &.active {
        color: #1fab62;

        .iconfont {
          color: #1fab62 !important;
        }

        .custom__grid__item__text {
          color: #1fab62;
        }
      }

      &__font {
        position: relative;

        .iconfont {
          font-size: 48rpx;
          color: #7b7b7b;
        }

        &--dot {
          position: absolute;
          top: 0;
          right: -2rpx;
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background-color: #f10d34;
        }
      }

      &__text {
        margin-top: 10rpx;
        font-size: 20rpx;
        color: #7b7b7b;
      }

      &__jia {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: linear-gradient(180deg, #4ecc7e 0%, #1fab62 100%);
        box-shadow: 0 0 12rpx 0 rgba(78, 204, 126, 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .iconfont {
          font-size: 56rpx;
          color: #fff;
        }
      }

      .custom__grid__plus__text{
        font-size: 20rpx;
        color: #7b7b7b;
        margin-top: -2rpx;
      }
    }

    .custom__grid__plus {
      background-color: #fff;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -80rpx;
      position: relative;
      overflow: hidden;
    }

    .custom__grid__plus::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: linear-gradient(
        to bottom,
        rgba(31, 171, 98, 0.1),
        transparent
      );
      border-radius: 50% 50% 0 0;
    }
  }
}
</style>
